<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // 事件修饰符 stop, prevent, capture, self, once, passive
    // 按键修饰符 enter, tab, delete, esc, up, down, left, right
    // 鼠标(左右键，滚轮)修饰符 left,right,middle
    // 精确修饰符exact
    const app = Vue.createApp({
        data(){
            return {
               counter:0
            }
        },
        methods:{
            handler(num,e){
                console.log(this.counter++ +num)
                console.log(e.target)
            },
            handlerDiv(){
                alert(123)
            },
            handlerKeydown(){
                console.log('handlerKeydown')
            },
            mouseMiddle(){
                console.log('mouseMiddle')
            }
        },
        template:
        `
            <div @click.once="handlerDiv">{{counter}}
                <button @click.stop="handler('two', $event)">增加</button>
            </div>
            <div>
                <input @keydown.enter="handlerKeydown"/>
            </div>
            <div>
                <div @click.middle="mouseMiddle">鼠标修饰符</div>
                <div @click.ctrl.exact="mouseMiddle">精确修饰符exact</div>
            </div>
        `
    });

    app.component('demo', {
        template: `
            
        `
    });

    const vm = app.mount("#root");
</script>
</html>